JSONP

JSONP 是一个能够被跨域访问资源的方法。

服务端

server.go

package main


import
(
"math/rand"
"net/http"
"time"
"github.com/labstack/echo"
"github.com/labstack/echo/middleware"
)
func main()
{
    e := echo.New()
    e.Use(middleware.Logger())
    e.Use(middleware.Recover())
    e.Static("/","public")
    // JSONP
    e.GET("/jsonp", func(c echo.Context) error{
        callback := c.QueryParam("callback")
        var content struct{
            Response  string `json:"response"`
            Timestamp time.Time `json:"timestamp"`
            Random    int `json:"random"`
        }
        content.Response = "Sent via JSONP"
        content.Timestamp = time.Now().UTC()
        content.Random = rand.Intn(1000)
        return c.JSONP(http.StatusOK, callback, &content)
    })
    // Start server
    e.Logger.Fatal(e.Start(":1323"))
}

客户端

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>
JSONP
</title>
<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type ="text/javascript">
var host_prefix ='http://localhost:1323';
$(document).ready(
function(){
// JSONP version - add 'callback=?' to the URL - fetch the JSONP response to the request
 $("#jsonp-button").click(function(e){
                e.preventDefault();
                // The only difference on the client end is the addition of 'callback=?' to the URL
                var url = host_prefix +'/jsonp?callback=?';
                $.getJSON(url,function(jsonp){
                    console.log(jsonp);
                    $("#jsonp-response").html(JSON.stringify(jsonp,null,2));
                   });
                  });
                 });
</script>
</head>
<body>
<div class="container" style="margin-top:50px;">
<input type ="button" class="btn btn-primary btn-lg" id="jsonp-button" value="Get JSONP response">
<p>
<pre id="jsonp-response">
</pre>
</p>
</div>
</body>
</html>

results matching ""

    No results matching ""